<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>创建新账户 - {:conf('site_name')}</title>
    <meta name="keywords" content="注册,账户,{:conf('site_name')}">
    <meta name="description" content="创建新账户 - {:conf('site_name')}">
    <meta name="author" content="www.qqss.net">
    <!-- Favicon -->
    <link rel="icon" href="{:conf('site_favicon')}" type="image/x-icon">
    <!-- CSS -->
    <link href="/static/default/css/tailwind/tailwind.min.css?v={$static_version}" rel="stylesheet">
    <link href="/static/css/fontawesome/css/all.min.css?v={$static_version}" rel="stylesheet">
    <link href="/static/default/css/main.css?v={$static_version}" rel="stylesheet">
    <link href="/static/default/css/user/auth.css?v={$static_version}" rel="stylesheet">
    <!-- 插件头部hook -->
    {cms:hooks name="template.head" /}
</head>

<body class="bg-gray-50">
    <!-- 插件头部hook -->
    {cms:hooks name="common.header.before" /}

    <div class="auth-container flex min-h-screen">
        <!-- 左侧图片区域 -->
        <div class="auth-left w-1/2 hidden lg:flex flex-col justify-center items-center text-white p-12 relative">
            <!-- 浮动图标 -->
            <i class="floating-icon fas fa-rocket text-4xl opacity-20"></i>
            <i class="floating-icon fas fa-star text-3xl opacity-15"></i>
            <i class="floating-icon fas fa-heart text-5xl opacity-10"></i>
            <i class="floating-icon fas fa-sparkles text-3xl opacity-25"></i>

            <div class="text-center z-10 relative max-w-md mx-auto">
                <!-- 主标题 -->
                <div class="mb-8">
                    <h1
                        class="text-5xl xl:text-6xl font-bold mb-4 bg-gradient-to-r from-white to-blue-100 bg-clip-text text-transparent">
                        开启新篇章
                    </h1>
                    <div class="w-16 h-1 bg-white bg-opacity-60 mx-auto rounded-full"></div>
                </div>

                <!-- 描述文案 -->
                <p class="text-xl xl:text-2xl mb-12 opacity-90 leading-relaxed font-light">
                    注册成为我们的一员<br>
                    <span class="text-lg opacity-75">探索无限可能，享受专属服务</span>
                </p>

                <!-- 特色功能 -->
                <div class="grid grid-cols-1 gap-6 mb-8">
                    <div class="flex items-center justify-center space-x-3 py-3 px-6 backdrop-blur-sm">
                        <i class="fas fa-rocket text-2xl text-purple-200"></i>
                        <span class="text-lg font-medium">极速体验</span>
                    </div>
                    <div class="flex items-center justify-center space-x-3 py-3 px-6 backdrop-blur-sm">
                        <i class="fas fa-heart text-2xl text-pink-200"></i>
                        <span class="text-lg font-medium">贴心服务</span>
                    </div>
                </div>

                <!-- 底部提示 -->
                <div class="text-sm opacity-60">
                    <p>已有超过 <span class="font-semibold text-blue-200">10万+</span> 用户的信赖选择</p>
                </div>
            </div>
        </div>

        <!-- 右侧表单区域 -->
        <div class="auth-right w-full lg:w-1/2 flex items-center justify-center p-6 lg:p-12">
            <div class="w-full max-w-md space-y-8">
                <!-- 头部 -->
                <div class="text-center">
                    <h2 class="text-2xl md:text-3xl font-bold text-gray-800 mb-2">
                        创建新账户
                    </h2>
                    <p class="text-sm text-gray-500">
                        已有账户？
                        <a href="{:_url_('user.login')}"
                            class="font-medium text-blue-600 hover:text-blue-500 transition-colors">
                            立即登录
                        </a>
                    </p>
                </div>

                <!-- 注册表单 -->
                <form id="register-form" class="space-y-6" onsubmit="return false;">
                    <div class="space-y-4">
                        <!-- 用户名 -->
                        <div>
                            <label for="username" class="block text-sm font-medium text-gray-700 mb-2">
                                用户名 <span class="text-red-500">*</span>
                            </label>
                            <input id="username" name="username" type="text" required
                                class="form-input appearance-none relative block w-full px-4 py-3 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                                placeholder="3-20位字母、数字或下划线" pattern="[a-zA-Z0-9_]{3,20}" onblur="checkUsername()">
                            <div id="username-tip" class="mt-1 text-xs text-gray-500"></div>
                        </div>

                        <!-- 邮箱 -->
                        <div>
                            <label for="email" class="block text-sm font-medium text-gray-700 mb-2">
                                邮箱地址 <span class="text-red-500">*</span>
                            </label>
                            <input id="email" name="email" type="email" required
                                class="form-input appearance-none relative block w-full px-4 py-3 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                                placeholder="请输入邮箱地址" onblur="checkEmail()">
                            <div id="email-tip" class="mt-1 text-xs text-gray-500"></div>
                        </div>

                        <!-- 密码 -->
                        <div>
                            <label for="password" class="block text-sm font-medium text-gray-700 mb-2">
                                密码 <span class="text-red-500">*</span>
                            </label>
                            <div class="relative">
                                <input id="password" name="password" type="password" required
                                    class="form-input appearance-none relative block w-full px-4 py-3 pr-12 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                                    placeholder="至少6位字符" minlength="6" onblur="checkPassword()">
                                <button type="button" onclick="togglePassword('password')"
                                    class="absolute inset-y-0 right-0 pr-4 flex items-center">
                                    <i id="password-icon"
                                        class="fas fa-eye text-gray-400 hover:text-blue-600 transition-colors"></i>
                                </button>
                            </div>
                            <div id="password-tip" class="mt-1 text-xs text-gray-500">
                                密码强度: <span id="password-strength" class="font-medium">弱</span>
                            </div>
                        </div>

                        <!-- 确认密码 -->
                        <div>
                            <label for="confirm_password" class="block text-sm font-medium text-gray-700 mb-2">
                                确认密码 <span class="text-red-500">*</span>
                            </label>
                            <div class="relative">
                                <input id="confirm_password" name="confirm_password" type="password" required
                                    class="form-input appearance-none relative block w-full px-4 py-3 pr-12 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                                    placeholder="请再次输入密码" onblur="checkConfirmPassword()">
                                <button type="button" onclick="togglePassword('confirm_password')"
                                    class="absolute inset-y-0 right-0 pr-4 flex items-center">
                                    <i id="confirm-password-icon"
                                        class="fas fa-eye text-gray-400 hover:text-blue-600 transition-colors"></i>
                                </button>
                            </div>
                            <div id="confirm-password-tip" class="mt-1 text-xs text-gray-500"></div>
                        </div>
                    </div>

                    <!-- 协议同意 -->
                    <div class="flex items-start">
                        <input id="agree" name="agree" type="checkbox" required
                            class="mt-1 h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
                        <label for="agree" class="ml-3 text-sm text-gray-600">
                            我已阅读并同意
                            <a href="/agreement?type=user_protocol" target="_blank"
                                class="text-blue-600 hover:text-blue-500 transition-colors">《用户协议》</a>
                            和
                            <a href="/agreement?type=privacy_protocol" target="_blank"
                                class="text-blue-600 hover:text-blue-500 transition-colors">《隐私政策》</a>
                        </label>
                    </div>

                    <!-- 注册按钮 -->
                    <div>
                        <button type="submit" onclick="doRegister()" id="register-btn"
                            class="btn-shine relative w-full flex items-center justify-center py-3 px-4 border border-transparent text-sm font-medium rounded-lg text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors duration-300 overflow-hidden">
                            <span class="relative z-10 flex items-center">
                                <i class="fas fa-user-plus mr-2"></i>
                                创建账户
                            </span>
                        </button>
                    </div>

                    <!-- 第三方注册 -->
                    <div class="mt-6">
                        <div class="relative">
                            <div class="absolute inset-0 flex items-center">
                                <div class="w-full border-t border-gray-300"></div>
                            </div>
                            <div class="relative flex justify-center text-sm">
                                <span class="px-2 bg-white text-gray-500">或者使用</span>
                            </div>
                        </div>

                        <!-- 第三方注册埋点 -->
                        {cms:hooks name="auth.register.third.party" /}
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- 引入脚本组件 -->
    {include file="default/components/scripts" /}

    <script>
        // 切换密码显示/隐藏
        function togglePassword(fieldId) {
            const passwordInput = document.getElementById(fieldId);
            const passwordIcon = document.getElementById(fieldId + '-icon');

            if (passwordInput.type === 'password') {
                passwordInput.type = 'text';
                passwordIcon.className = 'fas fa-eye-slash text-gray-400 hover:text-blue-600 transition-colors';
            } else {
                passwordInput.type = 'password';
                passwordIcon.className = 'fas fa-eye text-gray-400 hover:text-blue-600 transition-colors';
            }
        }

        // 检查用户名
        function checkUsername() {
            const username = document.getElementById('username').value;
            const tip = document.getElementById('username-tip');

            if (!username) {
                tip.textContent = '';
                return;
            }

            if (!/^[a-zA-Z0-9_]{3,20}$/.test(username)) {
                tip.textContent = '用户名格式不正确';
                tip.className = 'mt-1 text-xs text-red-500';
                return false;
            }

            tip.textContent = '用户名格式正确';
            tip.className = 'mt-1 text-xs text-green-500';
            return true;
        }

        // 检查邮箱
        function checkEmail() {
            const email = document.getElementById('email').value;
            const tip = document.getElementById('email-tip');

            if (!email) {
                tip.textContent = '';
                return;
            }

            const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
            if (!emailRegex.test(email)) {
                tip.textContent = '邮箱格式不正确';
                tip.className = 'mt-1 text-xs text-red-500';
                return false;
            }

            tip.textContent = '邮箱格式正确';
            tip.className = 'mt-1 text-xs text-green-500';
            return true;
        }

        // 检查密码强度
        function checkPassword() {
            const password = document.getElementById('password').value;
            const tip = document.getElementById('password-tip');
            const strength = document.getElementById('password-strength');

            if (!password) {
                strength.textContent = '弱';
                strength.className = 'font-medium text-red-500';
                return;
            }

            let score = 0;
            if (password.length >= 6) score++;
            if (password.length >= 8) score++;
            if (/[a-z]/.test(password)) score++;
            if (/[A-Z]/.test(password)) score++;
            if (/[0-9]/.test(password)) score++;
            if (/[^a-zA-Z0-9]/.test(password)) score++;

            if (score < 3) {
                strength.textContent = '弱';
                strength.className = 'font-medium text-red-500';
            } else if (score < 5) {
                strength.textContent = '中';
                strength.className = 'font-medium text-yellow-500';
            } else {
                strength.textContent = '强';
                strength.className = 'font-medium text-green-500';
            }

            return score >= 2;
        }

        // 检查确认密码
        function checkConfirmPassword() {
            const password = document.getElementById('password').value;
            const confirmPassword = document.getElementById('confirm_password').value;
            const tip = document.getElementById('confirm-password-tip');

            if (!confirmPassword) {
                tip.textContent = '';
                return;
            }

            if (password !== confirmPassword) {
                tip.textContent = '两次输入的密码不一致';
                tip.className = 'mt-1 text-xs text-red-500';
                return false;
            }

            tip.textContent = '密码确认正确';
            tip.className = 'mt-1 text-xs text-green-500';
            return true;
        }

        // 执行注册
        function doRegister() {
            const form = document.getElementById('register-form');
            const formData = new FormData(form);
            const btn = document.getElementById('register-btn');

            // 验证表单
            if (!checkUsername() || !checkEmail() || !checkPassword() || !checkConfirmPassword()) {
                showError('请检查表单填写是否正确');
                return;
            }

            if (!formData.get('agree')) {
                showError('请同意用户协议');
                return;
            }

            // 触发点击动画
            btn.classList.add('btn-clicked');
            setTimeout(() => btn.classList.remove('btn-clicked'), 800);

            // 显示加载状态
            btn.disabled = true;
            const originalContent = btn.querySelector('span').innerHTML;
            btn.querySelector('span').innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i>注册中...';

            // 发送注册请求
            $.ajax({
                url: '/user/doRegister',
                type: 'POST',
                data: {
                    username: formData.get('username'),
                    email: formData.get('email'),
                    password: formData.get('password'),
                    confirm_password: formData.get('confirm_password'),
                    agree: 1
                },
                success: function (response) {
                    if (response.code === 1) {
                        showSuccess('注册成功！请登录');
                        setTimeout(() => {
                            window.location.href = response.data.redirect || '/user/login';
                        }, 1500);
                    } else {
                        showError(response.msg || '注册失败');
                    }
                },
                error: function (xhr, status, error) {
                    console.error('Register error:', error);
                    showError('网络错误，请稍后重试');
                },
                complete: function () {
                    btn.disabled = false;
                    btn.querySelector('span').innerHTML = '<i class="fas fa-user-plus mr-2"></i>创建账户';
                }
            });
        }

        // 页面加载完成后的初始化
        document.addEventListener('DOMContentLoaded', function () {
            // 聚焦用户名输入框
            document.getElementById('username').focus();

            // 密码强度实时检测
            document.getElementById('password').addEventListener('input', checkPassword);

            // 确认密码实时检测
            document.getElementById('confirm_password').addEventListener('input', checkConfirmPassword);

            // 回车注册
            document.getElementById('register-form').addEventListener('keypress', function (e) {
                if (e.key === 'Enter') {
                    doRegister();
                }
            });
        });
    </script>

    <!-- 插件底部hook -->
    {cms:hooks name="common.footer" /}
</body>

</html>